import Tabs, { TabsProps } from '@/components/Tabs';
import { useIntl } from '@umijs/max';
import React, { useEffect, useState } from 'react';
import Style from '../../components/batteryIndex.less';
import { BarChart } from './profileChart';

interface Ipros {
  maxData: API.DeviceRealTimeDTO;
  hiddenItems: string[]; // 新增需要隐藏的items的key值列表
}

export const MaxOverview: React.FC<Ipros> = ({ maxData, hiddenItems }) => {
  const { tempList = [], voltageList = [], currentList = [], socList = [] } = maxData;
  const [selectedTab, setSelectedTab] = useState('tempt'); // State to track the selected tab
  const [filterItems, setfilterItems] = useState<TabsProps['items']>([]);
  const intl = useIntl();
  const handleTabChange = (key: string) => {
    setSelectedTab(key);
  };

  const items: TabsProps['items'] = [
    {
      key: 'tempt',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.TemperatureExtreme' }),
      children:
        selectedTab === 'tempt' ? <BarChart chartData={tempList} moduleType={'tempt'} /> : null,
    },
    {
      key: 'vol',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.VoltageExtreme' }),
      children:
        selectedTab === 'vol' ? <BarChart chartData={voltageList} moduleType={'vol'} /> : null,
    },
    {
      key: 'current',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.CurrentExtreme' }),
      children:
        selectedTab === 'current' ? (
          <BarChart chartData={currentList} moduleType={'current'} />
        ) : null,
    },
    {
      key: 'soc',
      label: intl.formatMessage({ id: 'stationRealtimeMonitoring.SOCExtreme' }),
      children: selectedTab === 'soc' ? <BarChart chartData={socList} moduleType={'soc'} /> : null,
    },
  ];

  useEffect(() => {
    let item = items.filter((item) => !hiddenItems.includes(item.key));
    setfilterItems(item);
  });

  return (
    <div className={Style.maxWrap}>
      <Tabs items={filterItems} onChange={handleTabChange} className={Style.secondTabs} />
    </div>
  );
};
